<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4624745_5q9umqk3hzk.css">
    <style>
      .header{
        width: 200px;
        height: 200px;
        background-color: aqua;
        
      }
      .active{
        border-radius:100px ;
        background-color: red;
      }
      .a1{
        padding: 70px;
      }
    </style>
</head>
<body>
    <div id="app">
     <button @click="num=!num">+</button>
    <q-header title="正方形"  v-if="num" ></q-header>
    <q-header title="圆形"  v-else class="active"></q-header>

    </div>    
</body>
<script src="./vue.js"></script>
<script>
    const{createApp,ref, reactive,computed}=Vue;
  let app= createApp({
        setup(){
           let num=ref(true);  
         return{
            num
            }
        }
    })
    app.component('q-header',{
        props:['title'],
        props:{
            title:String
        },
        props:{
            title:{
                type:[Number,String],
                required:false,
                default:666,
                validator(val){
                    console.log(val)
                    if(val%2===0){
                        return true
                    }else{
                        return false
                    }
                }
            },
            title:String
        },
        setup(props){
            let title=props.title;  
            return{
                title,
                
            }
        },template:`<div class="header">
      <p class="a1">{{title}}</p>
    </div>`
    })
    app.mount("#app")
</script>
</html>